<template>
    <div>
        <div class="Header">
            <a-input placeholder="请输入手机号/id查询" v-model:value="InputText"></a-input>
            <a-button @click="SelectAdmin">查询员工</a-button>
            <a-button @click="AddAdmin">添加员工</a-button>

            <p class="HeaderP">ps：不支持模糊查找员工</p>
        </div>
        <div v-if="dataSource.length > 0">
            <a-table :dataSource="dataSource" :pagination="false" bordered>
                <a-table-column key="adminId" title="员工id" data-index="adminId" />
                <a-table-column key="adminName" title="员工姓名" data-index="adminName" />
                <a-table-column key="adminPhone" title="员工电话" data-index="adminPhone" />
                <a-table-column title="员工状态">
                    <template #default="{ record }">
                        <span v-if="record.adminLeave === 1">在职</span>
                        <span v-else>离职</span>
                    </template>
                </a-table-column>
                <a-table-column title="操作">
                    <template #default="{ record }">
                        <a-button type="text" @click="Leave(record.adminId)" :disabled="record.adminLeave !== 1">{{
                            record.adminLeave == 1 ? "离职" : "已离职" }}</a-button>
                    </template>
                </a-table-column>
            </a-table>
            <div style="width:100%;text-align:center;margin:30px;paddint:30px;">
                <a-pagination v-model:current="page.pageIndex" v-model:pageSize="page.pageSize" :total="total"
                    show-less-items @change="PageChange" />
            </div>
        </div>
        <div v-else>
            <a-empty>
                <template #description>
                    <span>
                        暂无数据
                    </span>
                </template>
            </a-empty>
        </div>

        <!-- 弹窗 -->
        <div>
            <div class="Edit">
                <a-modal v-model:visible="visible" cancelText="取消" okText="提交" title="修改分类名称" @cancel="cancelEdit"
                    @ok="OKEdit">
                    <div class="AddAdmin">
                        <a-form :model="AdminList" :rules="rules" ref="AddStashRef">
                            <a-form-item label="管理员名称" name="adminName">
                                <a-input v-model:value="AdminList.adminName" placeholder="请输入管理员名称" />
                            </a-form-item>
                            <a-form-item label="管理员电话" name="adminPhone">
                                <a-input v-model:value="AdminList.adminPhone" placeholder="请输入管理员电话" />
                            </a-form-item>
                        </a-form>
                    </div>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { AdminSelectLimit, AdminUpdate, AdminAdd, AdminSelect } from "../../Axios/Admin";
// import { Time } from "../../utils/Time";
import { message } from "ant-design-vue";
let dataSource = ref([{}])
let InputText = ref()
let AddStashRef = ref()
let visible = ref(false)

let AdminList = ref({
    adminName: "",
    adminPhone: "",

})
const rules = {
    adminName: [{ required: true, message: "请填写姓名", trigger: "blur" },
    { max: 16, min: 2, message: "名字最小为2，最大不超过16", trigger: "blur" }],
    adminPhone: [{ required: true, message: "请填写手机号", trigger: "blur" },
    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: "手机号必须十一位", trigger: "blur" }]
}
let page = ref({
    "pageIndex": 1,
    "pageSize": 10
})
let total = ref(0)

onMounted(async () => {
    await init()

})
const PageChange = async (pagesIndex) => {
    page.value.pageIndex = pagesIndex
    await init()

}
watch(InputText, async () => {
    if (!InputText.value) {

        await init()
    }

})


const Leave = async (value) => {

    const res = await AdminUpdate({ adminId: value })
    if (res) {
        if (res.code === 200) {
            message.success(res.message)
            await init()

        } else {
            message.warn(res.message)
        }
    }
}

const AddAdmin = () => {
    visible.value = true
}
const OKEdit = async () => {
    AddStashRef.value.validate().then(async () => {

        const res1 = await AdminAdd(AdminList)
        if (res1) {
            if (res1.code === 200) {
                message.success(res1.message)
                await init()
                visible.value = false
                AdminList.value = {
                    adminName: "",
                    adminPhone: "",
                }
            } else {
                message.warn(res1.message)
            }
        }

    })

}
const cancelEdit = () => {
    visible.value = false
    AdminList.value = {
        adminName: "",
        adminPhone: "",
    }
}
const SelectAdmin = async () => {
    if (InputText.value) {
        const res = await AdminSelect({ adminPhone: InputText.value.trim() })
        if (res) {
            if (res.code === 200) {
                dataSource.value = []
                dataSource.value.push(res.data)
                console.log(dataSource.value);

            } else {
                message.warn("您输入的id/手机号不存在")
            }
        }

    } else {
        message.warn("请在输入框中输入内容查询")

    }
}

const init = async () => {
    const res = await AdminSelectLimit(page)

    if (res && res.code == 200) {
        if (res.data.Data) {
            dataSource.value = res.data.Data
            total.value = res.data.Total
        }

    }
}
</script>

<style lang="scss" scoped>
.Header {
    margin-bottom: 40px;

    .ant-input {
        width: 200px;

    }

    .ant-btn {
        margin-left: 20px;
    }

    .HeaderP {
        margin-top: 4px;
        color: red;
        font-size: 12px;
    }


    .HeaderSpanText {
        margin-left: 20px;

    }

}


.EditBox {
    .EditBoxP {

        .EditBoxPSpan {
            color: red;
        }
    }
}
</style>